import $ from 'jQuery';
(function () {
    let $vue = new Vue({
        el: '.work-order-char-main-hook',
        data: {
            account:{
                'palletCirculation':'',//流转状态
                'palletNonCirculation':'',//非流转状态
            },
            companyId:'',
            companyList: []
        },
        methods: {
            changeReport:function () {
                M.Page.emitPrePage();
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data: ['工单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['5月1日','5月2日','5月3日','5月4日','5月5日','5月6日','5月7日','5月8日','5月9日','5月10日','5月11日','5月12日','5月13日']
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '工单数',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color:'rgb(101,182,235)',
                                    label:{
                                        show:true,
                                        position:'top'
                                    }
                                }
                            },
                            data: [19325, 23438, 31000, 121594, 134141, 81807,65454,21345,98745,65214,32564,78984,56116],
                        },
                    ]
                });
                $("#Download1").click(function() {
                    var i = myChart.getConnectedDataURL({
                        type:'png',
                        backgroundColor:'white'
                        // 导出的图片分辨率比例，默认为 1。
                        //pixelRatio: number,
                    });
                    $(this).attr("href",i);
                    $(this).attr("download","test.png");
                });
            },
            drawLine2() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart2'));
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '工单数量',
                        x : 'center',
                        y : 'top',
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '18',
                            color:'rgba(81,88,114)',
                            fontWeight : 'normal'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data: ['待派件','待签收','待处理','待审核','已完成','已废弃'],
                        itemWidth:27,
                        itemHeight:10,
                        itemGap:24,
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '14',
                            color:'rgba(81,88,114)',
                            fontWeight : 'normal'
                        },
                    },
                    series : [
                        {
                            name: '告警数量',
                            type: 'pie',
                            radius: ['35%', '60%'],
                            center: ['50%', '50%'],
                            data:[
                                {value:this.account.palletNonCirculation, name:'待派件'},
                                {value:this.account.palletCirculation, name:'待签收'},
                                {value:this.account.palletNonCirculation, name:'待处理'},
                                {value:this.account.palletCirculation, name:'待审核'},
                                {value:this.account.palletNonCirculation, name:'已完成'},
                                {value:this.account.palletCirculation, name:'已废弃'},
                            ],
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false,
                                        position : 'center',
                                        textStyle : {
                                            fontSize : '30',
                                            fontWeight : 'bold'
                                        }
                                    }
                                }
                            },
                        }
                    ]
                });
                window.onresize = myChart.resize;
            },
        },
        created: function () {
            IOT.getServerData(URI.REPORT.WORK_ORDER.INFO_CHAR.CHAR, {}, (ret) => {
                if (ret.code === 200) {
                    this.account = $.extend({}, this.account, ret.data);
                    this.drawLine();
                    this.drawLine2();
                } else {
                    IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                }
            });
        },
        mounted: function () {
            this.drawLine();
            this.drawLine2();
            this.$nextTick(() => {
            });
        }
    });
})();